all repos — caroster @ 512757d6ae90dfc3ddae08bb34ddb889ee3ec54f

[Octree] Group carpool to your event https://caroster.io

frontend/pages/e/[uuid]/index.tsx (view raw)

  1import {useState, useReducer, PropsWithChildren} from 'react';
  2import {makeStyles} from '@material-ui/core/styles';
  3import {useTranslation} from 'react-i18next';
  4import EventLayout, {TabComponent} from '../../../layouts/Event';
  5import TravelColumns from '../../../containers/TravelColumns';
  6import NewTravelDialog from '../../../containers/NewTravelDialog';
  7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
  8import {
  9  EventByUuidDocument,
 10  FindUserVehiclesDocument,
 11  useFindUserVehiclesQuery,
 12} from '../../../generated/graphql';
 13import Fab from '../../../containers/Fab';
 14import pageUtils from '../../../lib/pageUtils';
 15import {getSession, useSession} from 'next-auth/react';
 16
 17interface Props {
 18  eventUUID: string;
 19  announcement?: string;
 20}
 21
 22const Page = (props: PropsWithChildren<Props>) => {
 23  return <EventLayout {...props} Tab={TravelsTab} />;
 24};
 25
 26const TravelsTab: TabComponent = (props: {event}) => {
 27  const classes = useStyles();
 28  const {t} = useTranslation();
 29  const session = useSession();
 30  const isAuthenticated = session.status === 'authenticated';
 31  const {data} = useFindUserVehiclesQuery({
 32    skip: !isAuthenticated,
 33  });
 34  const vehicles = data?.me?.profile?.vehicles?.data || [];
 35  const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
 36  const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
 37
 38  const addTravelClickHandler =
 39    isAuthenticated && vehicles?.length != 0
 40      ? toggleVehicleChoice
 41      : () => toggleNewTravel({opened: true});
 42
 43  return (
 44    <>
 45      <TravelColumns toggle={addTravelClickHandler} />
 46      <Fab
 47        onClick={addTravelClickHandler}
 48        aria-label="add-car"
 49        color="primary"
 50        className={classes.bottomRight}
 51      >
 52        {t('travel.creation.title')}
 53      </Fab>
 54      <NewTravelDialog
 55        context={openNewTravelContext}
 56        toggle={() => toggleNewTravel({opened: false})}
 57      />
 58      <VehicleChoiceDialog
 59        open={openVehicleChoice}
 60        toggle={toggleVehicleChoice}
 61        toggleNewTravel={toggleNewTravel}
 62        vehicles={vehicles}
 63      />
 64    </>
 65  );
 66};
 67
 68const useStyles = makeStyles(theme => ({
 69  bottomRight: {
 70    bottom: 0,
 71    right: theme.spacing(6),
 72
 73    [theme.breakpoints.down('sm')]: {
 74      right: theme.spacing(1),
 75      bottom: 56,
 76    },
 77  },
 78}));
 79
 80export const getServerSideProps = pageUtils.getServerSideProps(
 81  async (context, apolloClient) => {
 82    const {uuid} = context.query;
 83    const {host = ''} = context.req.headers;
 84    const session = await getSession(context);
 85    let event = null;
 86
 87    // Fetch event
 88    try {
 89      const {data} = await apolloClient.query({
 90        query: EventByUuidDocument,
 91        variables: {uuid},
 92      });
 93      event = data?.eventByUUID?.data;
 94    } catch (error) {
 95      return {
 96        notFound: true,
 97      };
 98    }
 99
100    // Fetch user vehicles
101    if (session)
102      await apolloClient.query({
103        query: FindUserVehiclesDocument,
104      });
105
106    return {
107      props: {
108        eventUUID: uuid,
109        metas: {
110          title: event?.attributes?.name || '',
111          url: `https://${host}${context.resolvedUrl}`,
112        },
113      },
114    };
115  }
116);
117
118export default Page;